<template>
  <div class="dashboard-editor-container">
    <panel-group :tip="tip" @handleSetLineChartData="handleSetLineChartData" />
    <el-row :gutter="20">
      <el-col :span="18" style="padding: 0;">
        <el-row class="clueSources">
          <span class="clueTitle">线索来源趋势</span>
          <!-- 线索来源趋势 -->
          <ClueSources />
        </el-row>
        <el-row style="padding: 0;">
          <!-- 渠道监测 -->
          <Channel-detection :chartData="chartData" />
        </el-row>
        <el-row
          class="clue-box"
          :gutter="20"
          style="margin-right:0;margin-left:0;"
        >
          <div class="channel-success-rate">
            <!-- API渠道成功率 -->
            <ApiSuccessRate />
          </div>
          <div class="channel-container">
            <el-row class="channel-monitor" style="padding: 0;">
              <span class="clueTitle cityTitle">渠道监测</span>
              <el-select
                v-model="channelId"
                filterable
                clearable
                :filter-method="dataFilter"
                @change="changeChannelId()"
                placeholder="选择渠道"
                style="width: 200px;"
                class="filter-item"
              >
                <el-option key="0" label="全部" :value="0" />
                <el-option
                  v-for="item in options"
                  :key="item.channelId"
                  :label="item.channel_name"
                  :value="item.channelId"
                />
              </el-select>
            </el-row>
            <el-row class="property-container" style="padding: 0;">
              <!-- 车房公积金芝麻分 -->
              <PieCharts
                :chartData="chartData"
                :channelId="channelId"
                class="pieChart"
              />
            </el-row>
            <el-row class="property-container" style="padding: 0;">
              <span class="clueTitle cityTitle">线索城市分布Top20</span>
              <!-- 线索城市分布Top20 -->
              <CityTop :chartData="chartData" :channelId="channelId" />
            </el-row>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <!-- 机构情况 -->
          <Institution />
        </el-row>
        <el-row>
          <!-- api情况 -->
          <ApiSituation />
        </el-row>
      </el-col>
    </el-row>
    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->
    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart-h24 :chart-data="lineChartData" />
    </el-row> -->
    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart-zhudai :chart-data="lineChartData" />
    </el-row> -->
    <!-- <div ref="myEchart" :style="{height:'800px',width:'100%'}" /> -->
  </div>
</template>
<script>
import PanelGroup from './componentsTwo/PanelGroup';
import ChannelDetection from './componentsTwo/ChannelDetection';
// import LineChartZhudai from './components/LineChartZhudai'
import PieCharts from './componentsTwo/PieCharts';
import CityTop from './componentsTwo/CityTop';
import ClueSources from './componentsTwo/ClueSources';
import Institution from './componentsTwo/Institution';
import ApiSituation from './componentsTwo/ApiSituation';
import ApiSuccessRate from './componentsTwo/ApiSuccessRate';

import echarts from 'echarts';
import { getRegionQuery, getPostRegionalSummary } from '@/api/home';
import { getChannelIdAndNick } from '@/api/user';

// import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    PieCharts,
    CityTop,
    ClueSources,
    ChannelDetection,
    Institution,
    ApiSituation,
    ApiSuccessRate
    // LineChartZhudai
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['userJson'],
  data() {
    return {
      subtextTemp: { all: 0, known: 0, unKnown: 0 },
      lineChartData: lineChartData.newVisitis,
      tip: false,
      usersdata: [
        {
          name: '北京',
          value: [
            {
              name: '注册人数',
              value: 123
            },
            {
              name: '完成认证人数',
              value: 123
            },
            {
              name: '开通VIP人数',
              value: 123
            }
          ]
        }
      ],
      knownAreadata: [
        {
          name: '北京',
          value: 51
        }
      ],
      chartData: '',
      optionsCopy: [],
      options: [],
      channelId: 0
    };
  },
  mounted() {
    // this.getRegionQuery()
    this.getChannelIdAndNick();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    changeChannelId(val) {
      console.log(this.channelId);
    },
    // 渠道下拉
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          console.log(item);
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element);
          this.options.push(element);
        }
      });
    },
    getRegionQuery() {
      getRegionQuery().then(res => {
        const resData = res.data.data[0].RegionalStatistics;

        this.usersdata = [];
        this.knownAreadata = [];
        for (let index = 0; index < resData.length; index++) {
          if (
            resData[index].area === '内蒙古自治区' ||
            resData[index].area === '黑龙江省'
          ) {
            const element = {
              name: resData[index].area.substr(0, 3),
              value: [
                { name: '注册人数', value: resData[index].users },
                { name: '完成认证人数', value: resData[index].certification },
                { name: '开通VIP人数', value: resData[index].vip }
              ]
            };
            this.usersdata.push(element);
            this.knownAreadata.push({
              name: resData[index].area.substr(0, 3),
              value: resData[index].users
            });
          } else {
            const element = {
              name: resData[index].area.substr(0, 2),
              value: [
                { name: '注册人数', value: resData[index].users },
                { name: '完成认证人数', value: resData[index].certification },
                { name: '开通VIP人数', value: resData[index].vip }
              ]
            };
            this.usersdata.push(element);
            this.knownAreadata.push({
              name: resData[index].area.substr(0, 2),
              value: resData[index].users
            });
          }
        }
        this.getPostRegionalSummary();
      });
    },
    getPostRegionalSummary() {
      getPostRegionalSummary().then(res => {
        this.subtextTemp.all = res.data.data[0].users;
        this.subtextTemp.known = res.data.data[0].knownArea;
        this.subtextTemp.unKnown = res.data.data[0].unknownArea;
        this.chinaConfigure();
      });
    },
    chinaConfigure() {
      const myChart = echarts.init(this.$refs.myEchart); // 这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      const that = this;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: 'rgb(255, 255, 255)',

        tooltip: {
          formatter: function(params) {
            var toolTiphtml = '';
            for (var i = 0; i < that.usersdata.length; i++) {
              if (params.name === that.usersdata[i].name) {
                toolTiphtml += '地区：' + that.usersdata[i].name + '<br>';
                for (var j = 0; j < that.usersdata[i].value.length; j++) {
                  toolTiphtml +=
                    that.usersdata[i].value[j].name +
                    '：' +
                    that.usersdata[i].value[j].value +
                    '<br>';
                }
              }
            }
            return toolTiphtml;
          }
        }, // 鼠标移到图里面的浮动提示框

        dataRange: {
          show: true,
          min: 0,
          max: 1000,
          text: ['高', '低'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        title: {
          left: 'center',
          text: '全国各地区数据统计',
          subtext:
            '总注册用户：' +
            this.subtextTemp.all +
            '       已知地区用户：' +
            this.subtextTemp.known +
            '       未知地区用户：' +
            this.subtextTemp.unKnown,
          subtextStyle: {
            color: 'black',
            fontSize: '14'
          }
        },
        geo: {
          // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false, // 是否开启平移，缩放
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          // {
          //   data: this.data,
          //   type: 'map',
          //   coordinateSystem: 'geo' // 对应上方配置
          // },
          {
            name: '已知地区',
            type: 'map',
            geoIndex: 0,
            data: this.knownAreadata
          }
        ]
      });
    },
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type];
    // },
    handleSetLineChartData(list) {
      this.chartData = list;
    },
    today() {
      if (this.tip) {
        this.tip = false;
      }
    },
    all() {
      if (!this.tip) {
        this.tip = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sigma-content {
  background-color: #ffffff;
  border-radius: 8px;
  height: 78px;
  line-height: 78px;
}
.sigma-line-text {
  width: 100%;
  display: inline-block;
  padding: 0 18px 0 18px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.dashboard-editor-container {
  padding: 16px 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .clueSources {
    position: relative;
  }
  .clueTitle {
    position: absolute;
    top: 20px;
    left: 16px;
    width: 150px;
    font-size: 16px;
    border-left: 3px solid #376df7;
    padding: 0 4px;
    z-index: 100;
    color: #000000;
    line-height: 10px;
  }
  .cityTitle {
    width: 300px;
  }
  .property-container {
    // margin-top: 8px;
  }
  .clue-box {
    display: flex;
    justify-content: space-between;
    // height: 520px;
    margin-bottom: 32px;
    .channel-success-rate {
      width: calc(50% - 8px);
    }
    .channel-container {
      position: relative;
      width: calc(50% - 8px);
      margin-left: 15px;
      background: #fff;
      .channel-monitor {
        height: 50px;
        .el-select {
          /* 下面设置右侧按钮居中 */
          .el-input__suffix {
            top: 5px;
          }
          .el-input__icon {
            line-height: inherit;
          }
          .el-input__suffix-inner {
            display: inline-block;
          }
        }

        .filter-item {
          position: absolute;
          top: 5px;
          right: 16px;
          height: 32px;
          .el-input__inner {
            height: 32px;
          }
        }
      }
    }
  }
}
.pieChartBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.pieChart {
  width: 100%;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
